import React from "react";
import ReactDOM from "react-dom/client";

/**
 * 事件处理
 */
class MyComponent extends React.Component {
  // constructor() {
  //   super()
  //   this.handleClick = () => {
  //     console.log("箭头函数 点击", this);
  //   };
  // }

  // // 成员方法书写, 如果作为事件函数引用, 则方法体内部的 this 为 undefined
  // handleClick() {
  //   console.log("点击", this);
  // }

  // 箭头函数书写，这是 es6 中定义 class 的一种简写
  handleClick = () => {
    console.log("箭头函数 点击", this);
  };

  render() {
    console.log("render this:", this);
    // // 调用 bind() 修改事件方法中的 this 指向
    // return <button onClick={this.handleClick.bind(this)}>按钮</button>;
    return <button onClick={this.handleClick}>按钮</button>;
  }
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<MyComponent title="千锋" />);
